<template>
    <div>
        <div class="BasicDetail">
            <div class="flex" style="justify-content: space-between;">
                <div>
                    {{ $t('text.House.l7') }}
                </div>
                <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;"
                    @click="editNeigh">
                    {{ $t('text.House.l14') }}
                </el-button>
            </div>
            <div class="flex2" v-if="isSecondHand == '0'">
                <div class="attributeItem">
                    <div>{{ $t('text.House.l70') }}</div>
                    <div class="t3">
                        <DialogLayout1 :type="0" :oldPrice="BasicDetailList.price" @returnData="setPrice1"></DialogLayout1>
                    </div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l71') }}</div>
                    <div class="t3" v-if="BasicDetailList.basePrice != null">
                        <DialogLayout1 :type="1" :oldPrice="BasicDetailList.basePrice" @returnData="setPrice2">
                        </DialogLayout1>
                    </div>
                    <div class="lookBase" v-if="BasicDetailList.basePrice == null" @click="lookBasePrice(1)">
                        {{ $t('text.System.l58') }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l72') }}</div>
                    <DialogLayout2 :mode="BasicDetailList.mode" v-if="Number(BasicDetailList.mode) < 0"
                        @returnData="setModeType"></DialogLayout2>
                    <DialogLayout5 v-if="Number(BasicDetailList.mode) == 0" :mode="BasicDetailList.mode"></DialogLayout5>
                    <DialogLayout5 v-if="Number(BasicDetailList.mode) == 1" :mode="BasicDetailList.mode"></DialogLayout5>
                    <DialogLayout6 v-if="Number(BasicDetailList.mode) == 2" :mode="BasicDetailList.mode"
                        @returnData="backkey"></DialogLayout6>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l73') }}</div>
                    <div>{{ BasicDetailList.floorArea == null ? '-' : BasicDetailList.floorArea }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l74') }}</div>
                    <div>{{ BasicDetailList.houseType == '0' ? $t('text.House.l187') : BasicDetailList.houseType == '1' ?
                        $t('text.House.l188') :
                        BasicDetailList.houseType == '2' ? $t('text.House.l189') : BasicDetailList.houseType == '3' ?
                            $t('text.House.l190') :
                            BasicDetailList.houseType == '3' ? $t('text.House.l191') : '' }}
                        {{ BasicDetailList.houseType != null && BasicDetailList.houseDetailsType != null ?
                            '-' + BasicDetailList.houseDetailsType : '' }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l75') }}</div>
                    <div>{{ BasicDetailList.buildingType == null ? '-' : BasicDetailList.buildingType }}</div>
                </div>

                <div class="attributeItem">
                    <div>{{ $t('text.House.l76') }}</div>
                    <div>{{ BasicDetailList.ownershipType == null ? '-' : BasicDetailList.ownershipType }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l77') }}</div>
                    <div>{{ BasicDetailList.ownershipLife == null ? '-' : BasicDetailList.ownershipLife }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l78') }}</div>
                    <div>{{ BasicDetailList.buildingYears == null ? '-' : BasicDetailList.buildingYears }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l79') }}</div>
                    <div>{{ BasicDetailList.houseStatus == null ? '-' : BasicDetailList.houseStatus }}</div>
                </div>

                <div class="attributeItem">
                    <div>{{ $t('text.House.l80') }}</div>
                    <div>{{ BasicDetailList.isUniqueHousing == '0' ? $t('text.House.l193') : $t('text.House.l192') }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l81') }}</div>
                    <div>
                        {{ BasicDetailList.mortgageStatus == '0' ? $t('text.House.l194') : $t('text.House.l195') }}
                        {{ BasicDetailList.mortgageFees == null ? '' : '/' + BasicDetailList.mortgageFees +
                            $t('text.PageData.l25')
                        }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l82') }}</div>
                    <div>{{ BasicDetailList.elevatorStatus == '0' ? $t('text.House.l194') : $t('text.House.l195') }}</div>
                </div>

                <div class="attributeItem">
                    <div>{{ $t('text.House.l83') }}</div>
                    <div>
                        {{ BasicDetailList.elevatorNumber != null ? BasicDetailList.elevatorNumber + $t('text.House.l196')
                            : '' }}
                        {{ BasicDetailList.householdNumber != null ? BasicDetailList.householdNumber + $t('text.House.l197')
                            : ""
                        }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l84') }}</div>
                    <div>{{ BasicDetailList.decorationLevel == null ? '-' : BasicDetailList.decorationLevel }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l85') }}</div>
                    <div>{{ BasicDetailList.supportingFacilities != null ? BasicDetailList.supportingFacilities : '-' }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l86') }}</div>
                    <div>{{ BasicDetailList.placeStorey }}/{{ BasicDetailList.totalFloor }}</div>
                </div>

                <div class="attributeItem">
                    <div>{{ $t('text.House.l87') }}</div>
                    <div>{{ BasicDetailList.toward == null ? '-' : BasicDetailList.toward }}</div>
                </div>

                <div class="attributeItem">
                    <div>{{ $t('text.House.l88') }}</div>
                    <div>{{ BasicDetailList.sourceChannel == null ? '-' : BasicDetailList.sourceChannel }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l89') }}</div>
                    <div class="t2">{{ BasicDetailList.remarks == null ? '-' : BasicDetailList.remarks }}</div>
                </div>
            </div>

            <div class="flex2" v-if="isSecondHand == '1'">
                <div class="attributeItem">
                    <div>{{ $t('text.House.l95') }}</div>
                    <div class="t3">
                        <DialogLayout1 :type="0" isSecondHand :oldPrice="BasicDetailList.rentPrice"></DialogLayout1>
                    </div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l71') }}</div>
                    <div class="t3" v-if="BasicDetailList.baseRentPrice != null">
                        <DialogLayout1 :type="1" isSecondHand :oldPrice="BasicDetailList.baseRentPrice"></DialogLayout1>
                    </div>
                    <div class="lookBase" v-if="BasicDetailList.baseRentPrice == null" @click="lookBasePrice(2)">
                        {{ $t('text.System.l58') }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l72') }}</div>
                    <DialogLayout2 :mode="BasicDetailList.mode" v-if="Number(BasicDetailList.mode) < 0"
                        @returnData="setModeType"></DialogLayout2>
                    <DialogLayout5 v-if="Number(BasicDetailList.mode) == 0" :mode="BasicDetailList.mode"></DialogLayout5>
                    <DialogLayout5 v-if="Number(BasicDetailList.mode) == 1" :mode="BasicDetailList.mode"></DialogLayout5>
                    <DialogLayout6 v-if="Number(BasicDetailList.mode) == 2" :mode="BasicDetailList.mode"
                        @returnData="backkey"></DialogLayout6>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l73') }}</div>
                    <div>{{ BasicDetailList.floorArea == null ? '-' : BasicDetailList.floorArea }}</div>
                </div>

                <div class="attributeItem">
                    <div>{{ $t('text.House.l90') }}</div>
                    <div>{{ BasicDetailList.rentalMethod == null ? '-' : BasicDetailList.rentalMethod }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l91') }}</div>
                    <div>{{ BasicDetailList.rentPayMethod == null ? '-' : BasicDetailList.rentPayMethod }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l92') }}</div>
                    <div>{{ BasicDetailList.minTenancy == null ? '-' : BasicDetailList.minTenancy }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l93') }}</div>
                    <div>{{ BasicDetailList.abidesTime == null ? '-' : BasicDetailList.abidesTime }}</div>
                </div>


                <div class="attributeItem">
                    <div>{{ $t('text.House.l74') }}</div>
                    <div>
                        {{ BasicDetailList.houseType == '0' ? $t('text.House.l187') : BasicDetailList.houseType == '1' ?
                            $t('text.House.l188') :
                            BasicDetailList.houseType == '2' ? $t('text.House.l189') : BasicDetailList.houseType == '3' ?
                                $t('text.House.l190') :
                                BasicDetailList.houseType == '3' ? $t('text.House.l191') : '' }}
                        {{ BasicDetailList.houseType != null && BasicDetailList.houseDetailsType != null ?
                            '-' + BasicDetailList.houseDetailsType : '' }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l78') }}</div>
                    <div>{{ BasicDetailList.buildingYears == null ? '-' : BasicDetailList.buildingYears }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l79') }}</div>
                    <div>{{ BasicDetailList.houseStatus == null ? '-' : BasicDetailList.houseStatus }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l94') }}</div>
                    <div>{{ BasicDetailList.rentContain == null ? '-' : BasicDetailList.rentContain }}</div>
                </div>

                <div class="attributeItem">
                    <div>{{ $t('text.House.l82') }}</div>
                    <div>{{ BasicDetailList.elevatorStatus == '0' ? $t('text.House.l194') : $t('text.House.l195') }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l83') }}</div>
                    <div>
                        {{ BasicDetailList.elevatorNumber != null ? BasicDetailList.elevatorNumber + $t('text.House.l196')
                            : '' }}
                        {{ BasicDetailList.householdNumber != null ? BasicDetailList.householdNumber + $t('text.House.l197')
                            : ""
                        }}
                    </div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l84') }}</div>
                    <div>{{ BasicDetailList.decorationLevel == null ? '-' : BasicDetailList.decorationLevel }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l240') }}</div>
                    <div>{{ BasicDetailList.supportingFacilities == null ? '-' : BasicDetailList.supportingFacilities }}
                    </div>
                </div>


                <div class="attributeItem">
                    <div>{{ $t('text.House.l86') }}</div>
                    <div>{{ BasicDetailList.placeStorey }}/{{ BasicDetailList.totalFloor }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l87') }}</div>
                    <div>{{ BasicDetailList.toward == null ? '-' : BasicDetailList.toward }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l88') }}</div>
                    <div>{{ BasicDetailList.sourceChannel == null ? '-' : BasicDetailList.sourceChannel }}</div>
                </div>
                <div class="attributeItem">
                    <div>{{ $t('text.House.l89') }}</div>
                    <div class="t2">{{ BasicDetailList.remarks == null ? '-' : BasicDetailList.remarks }}</div>
                </div>


            </div>

        </div>

        <div class="BasicDetail">
            <div class="flex" style="justify-content: space-between;">
                <div>
                    {{ $t('text.House.l8') }}
                </div>
                <DialogLayout7 :officialList="officialListCopy" @returnData="setOfficialList">
                    <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">{{
                        $t('text.House.l14') }}</el-button>
                </DialogLayout7>
            </div>
            <div class="flexc2">
                <div class="tt1">{{ $t('text.House.l9') }}</div>
                <div class="tt2">{{ officialListCopy.houseTitle == null ? '-' : officialListCopy.houseTitle }}</div>
                <div class="tt1">{{ $t('text.House.l10') }}</div>
                <div class="tt2">{{ officialListCopy.corePoint == null ? '-' : officialListCopy.corePoint }}</div>
                <div class="tt1">{{ $t('text.House.l11') }}</div>
                <div class="tt2">{{ officialListCopy.houseCharacteristics == null ? '-' :
                    officialListCopy.houseCharacteristics }}</div>
            </div>
        </div>

        <div class="BasicDetail">
            <div class="flex" style="justify-content: space-between;">
                <div>
                    {{ $t('text.House.l12') }}
                </div>
                <DialogLayout13 type="房源">
                    <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">
                        {{ $t('text.House.l15') }}
                    </el-button>
                </DialogLayout13>
            </div>

            <div style="display: flex;width: 100%;">
                <ToppingCard :cardLoad="cardLoad"></ToppingCard>
            </div>

        </div>

        <div class="BasicDetail">
            <div class="flex" style="justify-content: space-between;">
                <div>
                    {{ $t('text.House.l13') }}
                </div>
                <DialogLayout8 @returnData="setRole">
                    <el-button round style="height: 28px;width: 80px;color: #6698ff;border: 1px solid #6698ff;">{{
                        $t('text.House.l16') }}</el-button>
                </DialogLayout8>
            </div>
            <div class="flex3">
                <div v-for="s in peopleListCopy" v-bind:key="s" class="role">
                    <div class="flex" style="flex: 1;align-items: center;position: relative;">
                        <CommonImage class="head" :src="s.avatar" />
                        <div class="flexc3">
                            <div class="tt2">{{ s.username }}</div>
                            <div class="tt1">{{ s.role }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>
    
<script>
import DialogLayout1 from '@/components/dialogLayout/DialogLayout1.vue'
import DialogLayout13 from '@/components/dialogLayout/DialogLayout13.vue'
import DialogLayout2 from '@/components/dialogLayout/DialogLayout2.vue'
import DialogLayout5 from '@/components/dialogLayout/DialogLayout5.vue'
import DialogLayout6 from '@/components/dialogLayout/DialogLayout6.vue'
import DialogLayout7 from '@/components/dialogLayout/DialogLayout7.vue'
import DialogLayout8 from '@/components/dialogLayout/DialogLayout8.vue'
import ToppingCard from '@/components/houseList/ToppingCard.vue'
import CommonImage from '@/components/input/CommonImage.vue'
import pinia from '../../store'
import { useHouse } from '../../store/houseShareData'
import { lookBasePrice } from '../../http/api'
export default {
    name: 'BasicDetail',
    props: {
        isSecondHand: {
            default: '0',
            type: String
        },
        officialList: {
            default: {}
        },
        peopleList: {
            default: []
        }
    },
    components: {
        DialogLayout1,
        DialogLayout2,
        DialogLayout5,
        DialogLayout6,
        DialogLayout7,
        DialogLayout13,
        ToppingCard,
        DialogLayout8,
        CommonImage
    },
    data() {
        return {
            officialListCopy: this.officialList,
            isonMouse: false,
            mouseIndex: 0,
            peopleListCopy: this.peopleList,
            cardLoad: false,
        }
    },
    mounted() {
    },
    methods: {

        //查看底价
        lookBasePrice(type) {
            lookBasePrice({ houseId: useHouse(pinia).houseBaseData.id, houseClass: useHouse(pinia).houseBaseData.houseClass }).then(res => {
                if (res !== undefined) {
                    if (res == null) {
                        type === 2 ? useHouse(pinia).houseBaseData.baseRentPrice = 0 : useHouse(pinia).houseBaseData.basePrice = 0
                    }
                }
            }).catch()
        },

        //编辑跳转
        editNeigh() {
            if (this.BasicDetailList.houseClass == '2') {
                //如果是可租可售，按照点击哪个类型进来的，就跳转到哪种编辑类型
                let data = JSON.parse(JSON.stringify(this.BasicDetailList))
                data.houseClass = this.$route.query.index
                localStorage.setItem("addHouse", JSON.stringify(data))
                this.$router.push({ path: '/add', query: { edit: true } })
            } else {
                localStorage.setItem("addHouse", JSON.stringify(this.BasicDetailList))
                this.$router.push({ path: '/add', query: { edit: true } })
            }
        },
        //返回值更新角色
        setRole(params) {
            let index = this.peopleListCopy.findIndex(v => v.role === params.role)
            if (index >= 0) {
                this.peopleListCopy[index].username = params.realName
            } else {
                let temp = {
                    role: params.role,
                    username: params.realName,
                    avatar: null,
                    sysUserId: ""
                }
                this.peopleListCopy.push(temp)
            }
        },
        //返回值更新房源特色
        setOfficialList(params) {
            this.officialListCopy = params
        },
        //更新价格
        setPrice1(value) {
            useHouse(pinia).houseBaseData.price = value
        },
        //更新底价
        setPrice2(value) {
            useHouse(pinia).houseBaseData.basePrice = value
        },
        //退还钥匙
        backkey() {
            useHouse(pinia).houseBaseData.mode = '-1'
        },
        //设置钥匙状态
        setModeType(type) {
            if (this.BasicDetailList.mode == '2') {
                useHouse(pinia).houseBaseData.mode = '2'
            } else {
                useHouse(pinia).houseBaseData.mode = type
            }
        }

    },
    watch: {
        officialList() {
            if (this.officialList != null) {
                this.officialListCopy = this.officialList
            }

        },
        peopleList() {
            this.peopleListCopy = this.peopleList
        },
        houseFollowUp() {
            this.cardLoad = !this.cardLoad
        }
    },
    computed: {
        houseFollowUp() {
            return useHouse(pinia).houseFollowUp
        },
        BasicDetailList() {
            return useHouse(pinia).houseBaseData
        }
    },

}
</script>
    
<style scoped>
.lookBase {
    background: #6698ff;
    color: white;
    width: fit-content;
    padding: 1px 5px;
    border-radius: 5px;
    font-size: 12px;
}

.role {
    min-width: 200px;
    gap: 20px;
    flex-wrap: wrap;
    padding-bottom: 20px;
    padding-top: 10px;
}

.p1 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.BasicDetail {
    margin-left: 35px;
    margin-right: 35px;
    display: flex;
    flex-direction: column;
    padding-bottom: 25px;
    border-bottom: 2px solid #eee;
    padding-top: 10px;
}

.flex {
    display: flex;
    align-items: center;
}

.flex2 {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.flex3 {
    display: flex;
    align-items: center;
    margin-left: 35px;
    margin-right: 35px;
    flex-wrap: wrap;
}

.flexc {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.flexc2 {
    display: flex;
    flex-direction: column;
    margin-left: 35px;
    margin-right: 35px;
}

.flexc3 {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    margin-right: 35px;
}

.t2 {
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.t3 {
    font-size: 14px;
    color: rgb(245, 155, 34);
    display: flex;
    align-items: center;
}

.tt1 {
    text-align: left;
    font-size: 13px;
    color: gray;
    padding-top: 10px;
}

.tt2 {
    text-align: left;
    font-size: 13px;
    color: black;
    padding-top: 10px;
    word-break: break-all;
}

.head {
    width: 40px;
    height: 40px;
    margin-top: 12px;
    border: 1px solid #eee;
    border-radius: 50px;
}

.attributeItem {
    width: 20%;
    text-align: left;
    margin-left: 35px;
    font-size: 13px;
    padding-top: 10px;
    padding-bottom: 10px;
    gap: 5px;
    display: flex;
    flex-direction: column;
}

.tagKey {
    color: #6698ff;
    border: 1px solid #6698ff;
    width: fit-content;
    padding: 1px 3px;
    border-radius: 4px;
    font-size: 12px;
}
</style>